React Sketch.app でコードからデザインファイルを作ってみる

清田隆志

2017.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

オハコンバンニチハ、モバイルアプリサービス部のUIデザイナー清田です。

ここ最近お仕事でReact.jsを利用したフロントエンドのUI実装を担当しています。

Reactの魅力に取り憑かれながら関連するツールをフラフラとリサーチしていたところ、おもしろそうなツールとであったのでご紹介しようと思います。

React Sketch.app とは？

民泊サービスで有名な Airbnb の中の人が開発している、React Sketch.appをご紹介します。公式サイトの概要文には以下と記載されています。

render React components to Sketch; tailor-made for design systems

引用 : react-sketchapp - Airbnb.io

端的にご説明すると、React.jsを利用してSketchファイルを生成してくれるツールとのこと。これまたユニークなツールですね。ちょっとどれほどのものなのか気になったので今回はReact.jsからSketchに出力するまでの流れをご紹介できればと思います。

実行環境情報

今回自分の方で試した環境情報を記載します。

OS High Sierra v10.13.2
Sketch v48.2
Node v8 +
npm v5 +
Sketch Plugin Manager 1.0.12

補足になりますが、最近Sketchのバージョンアップサイクルが短い印象です。バージョンアップに伴って動かないということもあるのでご利用するツールのバージョンに注視しておくとよいと思います。

おしながき

今回は大きく３つのステップにわけてご説明していきます。

Sketch Plugin Manager(skpm)のインストール
基本的な実行環境のセットアップ
React Sketch.appによるビルド実行

Sketch Plugin Manager のインストール

公式サイト - skpm - Sketch Plugin Manager

Node.js で Sketchプラグイン開発からデプロイをこなしてくれるツールになります。それでは早速インストールしてみましょう

$ npm install -g skpm

次に正常にインストールできたかskpm -vで確認します。

$ skpm -v

    .     '     ,
      _________
  _  /_|_____|_\  _  skpm 1.0.12
     '. \   / .'
       '.\ /.'
         '.'

上記のようにバージョンが表示されるとインストールできたことが確認できます。

実行環境のセットアップ

Sketch Plugin Manager(以下、skpm)をインストールしたことにより、Node jsから Sketchプラグインを生成することができるようになりました。

実際にプラグインを動作する環境を構築していこうと思います。 skpmにはプラグインの雛形を作るコマンドが用意されているので、そちらを利用します。任意の作業用ディレクトリを作成し、移動後に以下のコマンドを実行します。

$ cd workspace // 任意のディレクトリ
$ skpm create react-sketch-example　// Sketchプラグインの雛形

正常にプラグインが作成できると以下のメッセージが表示されます。


Done!
To get started, cd into the new directory:
  cd react-sketch-example

To start a development live-reload build:
  npm run start

To build the plugin:
  npm run build

To publish the plugin:
  skpm publish

そして作業用ディレクトリ内に react-sketch-exampleディレクトリが作成されていると思います。ファインダー等で中身を確認すると以下のようなディレクトリ構造ができていれば成功です。

react-sketch-example/
　├ node_modules/
　├ plugin.sketchplugin/
　├ src/
　│　├ manifest.json 
　│　└ my-command.js
　├ .gitignore
　├ package-lock.json
　└ package.json

雛形プラグイン用ファイルが生成されているのが確認できました。それではSketch上で動作するのか一旦確認してみたいと思います。 npm run start コマンドは実際にコードを書きながらSketch側に自動読込み&実行してくれるコマンドです。

$ npm run start

"It's alive (ハイタッチアイコン)" と記載されたメッセージが表示されれば成功です。

Sketchのメニューにも先程作成したプラグインが表示されているの読み込まれていることが確認できます。

Sketch > Plugins > react-sketch-example > my-command

プラグインの雛形作成と動作確認できました。

React Sketch.appの実行環境セットアップ

Nodejs側からSketchプラグインを実行できるところまではできたので、ここから本題のReact Sketch.appの実行環境をセットアップしていきます。 react-sketch-exampleディレクトリ内で移動し利用するモジュールを以下のコマンドよりインストールします。

$ cd react-sketch-example
$ npm i chroma-js prop-types react react-sketchapp react-test-renderer

今回利用するモジュールは以下になります。

chroma-js
- カラー情報を操作できるモジュール
prop-types
- コンポーネント間のデータI/Fの型をチェックしてくれるモジュール
react
- React.js のコアモジュール
react-sketchapp
- React Sketch.app のコアモジュール
react-test-renderer
- React コンポーネントをJavaScriptオブジェクトにして返してくれるモジュール

Github : react-sketchapp | package.jsonで紹介されているサンプルと同じモジュールになります。

ディレクトリ構成の確認

skpmで作った雛形のディレクトリ構造は以下となっています。

今回は manifest.json と my-command.js のファイルを修正します。

react-sketch-example/
　├ node_modules/
　├ plugin.sketchplugin/
　├ src/
　│　├ manifest.json < 修正するファイル
　│　└ my-command.js < 修正するファイル
　├ .gitignore
　├ package-lock.json
　└ package.json

manifest.json

Sketch上で、プラグインとして識別用の設定ファイルになります。

{
  "compatibleVersion": 3,
  "bundleVersion": 1,
  "commands": [
    {
      "name": "React To Sketch",               // コマンドの名称
      "identifier": "react-sketch-identifier", //コマンドの識別子
      "script": "./my-command.js"              // 実行するjsファイルを指定
    }
  ],
  "menu": {
    "title": "react-sketch-example", // Sketch側のメニューに表示する表記
    "items": [
      "react-sketch-identifier" //コマンドの識別子
    ]
  }
}

my-command.js

このファイルがSketch上で動作する実行ファイルになります。こちらにReact.jsの記述をしてSketchファイル生成をおこなっていきます。今回はまずお試しで4.7アートボード生成だけを行ってみたいと思います。

import React from 'react';
import { render, Text, Artboard } from 'react-sketchapp';

export default (context) => {
  render(
    <Artboard
      name='My Artboard' //アートボード名前
      style={{
        width: 375,
        height: 667,
      }}
    >
      <Text>Hello world!</Text>
    </Artboard>, 
    context.document.currentPage()
  );
}

ビルド

ここまででコードを修正は一旦終わりになります。コマンドラインツール側に戻り、再度npm run startを実行してみます。

$ npm run start

デザインファイルの出力

Sketchが起動され以下の画面が表示されれば成功です。

React.js側で指定したコード内容のアートボード名、アートボードサイズ、テキストコンポーネント等表示がされていますね！

今後の展望

JavaScripのコードからSketchファイルの生成ができました！しかし、、、JavaScripからデザインカンプを作るといった用途的には厳しいものがあるかもしません。

今後の展望として、React.js の特徴のコンポーネントベースでUIを構築していく思想に沿いながら、 React Sketch.appを利用してコンポーネントライブラリ的なライブラリ集を開発し、案件の初期段階のプロトタイプ、モックアップを迅速に構築できるようになれればなと考えています。